@import "../../style/modules/function";

.modal-cover {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .35);
}

.fix-bar {
    position: fixed;
    right: 0;
    bottom: 18vh;
    z-index: 101;
    display: flex;
    align-items: center;
    transform: translateX(calc(100% - #{rpx(85)}));
    transition: all .2s;
    box-sizing: border-box;

    .block-btn {
        width: rpx(85);
        height: rpx(65);
        background: rgba(0, 0, 0, .7);
        color: #fff;
        font-size: 10px;
        border-top-left-radius: rpx(10);
        border-bottom-left-radius: rpx(10);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .icon {
            width: rpx(30);
            height: rpx(30);
            flex: 0 0 rpx(30);
            background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle/%3E%3C/defs%3E%3Cpath d='M170.667 533.333l320-320 29.866 29.867L230.4 533.333l290.133 290.134-29.866 29.866-320-320zm298.666 0l320-320L819.2 243.2 529.067 533.333 819.2 823.467l-29.867 29.866-320-320z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;
            background-size: 100%;
        }

        text {
            flex: 0 0 2.3em;
            text-align: center;
        }
    }

    .list-wrap {
        background-color: #fff;
        border-top-left-radius: rpx(10);
        border-bottom-left-radius: rpx(10);
        font-size: rpx(22);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: rpx(20) rpx(20) 0;
        box-sizing: border-box;
        color: #333;
    }

    &.show {
        transform: translateX(0);

        .icon {
            transform: rotate(180deg);
        }
    }
}
:host{
    font-size: rpx(22);
    color: #333;
}
